<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			
			}
			div{
				width: 100px;
				height: 100px;
				
			}
			.box1{
				background-color: red;
				position: relative;
				left: 0;
				top: 0;
			}
			.box2{
				background-color: green;
				position: absolute;
				left: 50px;
				top: 50px;
				z-index: 1;
			}
			.box3{
				background-color: blue;
				position: fixed;
				left: 100px;
				top: 100px;
			}
			
		</style>
	</head>
	<body>
		
		<!-- 
		 1.什么是z-index 属性
		 默认情况下所有的元素都有一个默认的z-index属性
		 z-index属性的作用是专门用于控制定位流元素的覆盖关系的
		 
		 默认情况下 定位流的元素会盖住标准流元素
		 默认情况下 定位流的元素后面编写的会盖住前面编写的
		 如果定位流的元素设置了z-index属性 谁的z-index属性比较大
		 谁就会显示在上面
		 static 定位流不会有效 
		 并且z-index 只对定位流有效
		 
		 
		 
		 注意点：
		 从父现象
		 如果两个元素的父元素都没有设置z-index属性 那么谁的z-index属性比较大
		 谁就显示在上面 如果两个元素的父元素设置了z-index 子元素的z-index 就会失效
		 那么也就是说 谁的父元素z-index属性比较大 谁就显示在上面
		 
		 
		 
		 -->
		
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>
</html>